<template>
  <div class="userRelation">
    <div class="userRelation-page">
      <AreaTitleWarp :title="'紧急联系人'"></AreaTitleWarp>
      <div class="Contacts" v-if="mobileInfoData">
        <AreaWarp :padding="false">
          <el-table
		  	size='mini'
            :data="mobileInfoData.conList"
            style="width: 100%"
            class="pub-table"
            header-row-class-name="pub-table-header-row"
            header-cell-class-name="pub-table-header-cell"
          >
            <el-table-column type="index" width="50" label="序号"></el-table-column>
            <el-table-column prop="relate" label="关系" ></el-table-column>
            <el-table-column prop="name" label="联系人姓名"></el-table-column>
            <el-table-column prop="nickname" label="通讯录备注"></el-table-column>
            <el-table-column prop="mobile" label="手机号码" min-width="120"></el-table-column>
            <el-table-column prop="callCnt" label="通话次数" min-width="120"></el-table-column>
            <el-table-column prop="callLen" label="通话时长(分)" min-width="120"></el-table-column>
            <el-table-column prop="callOutCnt" label="主叫次数" min-width="120"></el-table-column>
            <el-table-column prop="callInCnt" label="被叫次数" min-width="120"></el-table-column>
            <el-table-column
              prop="startTime"
              label="最近一次联系时间"
              min-width="180"
              :formatter="formatter_timeYMDHMS"
            ></el-table-column>
            <el-table-column prop="phoneNumLoc" label="归属地"></el-table-column>
            <el-table-column label="操作" min-width="120">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="followUp(scope.row,1)">提醒</el-button>
              </template>
            </el-table-column>
          </el-table>
        </AreaWarp>
      </div>
    </div>
    <div class="userRelation-page">
      <AreaTitleWarp :title="'联系人信息'"></AreaTitleWarp>
      <el-tabs v-model="activeName">
        <el-tab-pane label="运营商" name="1">
          <div v-if="mobileInfoData">
            <AreaWarp :padding="false">
              <el-table
			  	size="mini"
                :data="mobileInfoData.list"
                style="width: 100%"
                class="pub-table"
                header-row-class-name="pub-table-header-row"
                header-cell-class-name="pub-table-header-cell"
              >
                <el-table-column prop="contactName" label="通讯录名称" min-width="120"></el-table-column>
                <el-table-column prop="phoneNum" label="联系号码" min-width="120"></el-table-column>
                <el-table-column prop="callCnt" label="联系次数" min-width="100"></el-table-column>
                <el-table-column prop="callLen" label="联系时间" min-width="100"></el-table-column>
                <el-table-column prop="callOutCnt" label="主叫次数" min-width="100"></el-table-column>
                <el-table-column prop="callInCnt" label="被叫次数" min-width="100"></el-table-column>
                <el-table-column
                  prop="startTime"
                  label="最近一次联系时间"
                  min-width="160"
                  :formatter="formatter_timeYMDHMS"
                ></el-table-column>
                <el-table-column prop="phoneNumLoc" label="归属地"></el-table-column>
                <el-table-column label="操作" min-width="120">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="followUp(scope.row,2)">提醒</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </AreaWarp>
          </div>
        </el-tab-pane>
        <el-tab-pane label="通讯录" name="2">
          <userMailList :queryMsg="queryMsg"></userMailList>
        </el-tab-pane>
      </el-tabs>
    </div>

    <userDueAdd
      :queryMsg="queryMsg"
      :message="message"
      v-if="dialogVisibleShow"
      @userCollection="userCollection"
    ></userDueAdd>
  </div>
</template>
<script>
import userMailList from "./usermailListDue.vue";
import userDueAdd from "./userDueAdd.vue";
export default {
  props: ["queryMsg"],
  data() {
    return {
      activeName: "1",
      userRelationLoading: false,
      mobileInfoData: {
        conList: [],
        list: []
      },
      dialogVisibleShow: false,
      message: null
    };
  },
  components: {
    userMailList,
    userDueAdd
  },
  methods: {
    mobileInfo() {
      let that = this;
      that.userRelationLoading = true;
      that.ajaxJson({
        url: "/collection/mobileInfo",
        data: {
          userId: that.queryMsg.userId
        },
        success: function(data) {
          if (data.code == "0") {
            that.mobileInfoData = data.data;
          }
          that.userRelationLoading = false;
        }
      });
    },
    followUp(row, index) {
      let that = this;
      if (index == 1) {
        that.message = {
          relationName: row.name,
          relationMobile: row.mobile
        };
      } else if (index == 2) {
        that.message = {
          relationName: row.contactName,
          relationMobile: row.phoneNum
        };
      }

      that.dialogVisibleShow = true;
    },
    userCollection(row) {
      let that = this;
      that.dialogVisibleShow = row.dialogVisibleShow;
    }
  },
  created() {
    let that = this;
    that.mobileInfo();
  }
};
</script>
<style lang="less">
.userRelation {
  .el-tabs {
    margin-top: 0 !important;
  }
}
</style>
